<template>
    <div class="wh-100" style="background-color: white">
        <div class="h-10 bor-base-b py-32 px-12 fw-6 fs-18 d-flex-between-center">
            <span>参会企业资质审核</span>
            <el-button size="small" @click="$router.back()">返回</el-button>
        </div>
        <div class="h-80 bor-base-b">
            <div class="h-10 d-flex bor-base-b">
                <div class="w-15 py-12 pl-24 mr-auto">
                    <el-button @click="exportData" >导出数据</el-button>
                </div>
                <div class="w-65 pl-100 d-flex-align-center">
                    <div class="ml-auto">
                        <el-select no-match-text="暂无数据"  no-data-text="暂无数据" v-model="pageParams.status" placeholder="所属状态" clearable>
<!--                            <el-option value="0" label="未提交审核"></el-option>-->
                            <el-option value="1" label="待审核"></el-option>
                            <el-option value="2" label="通过"></el-option>
                            <el-option value="3" label="审核不通过"></el-option>
                        </el-select>
                    </div>
                    <div class="ml-28">
                        <el-select no-match-text="暂无数据"  no-data-text="暂无数据" v-model="pageParams.unitIndustry" placeholder="行业" clearable>
                            <el-option v-for="item in industrySelection" :key="item.value" :label="item.title" :value="item.title"></el-option>
                        </el-select>
                    </div>
                    <div class="ml-28">
                        <el-select no-match-text="暂无数据"  no-data-text="暂无数据" v-model="pageParams.unitQuality" placeholder="单位性质" clearable>
                            <el-option v-for="item in natureSelection" :key="item.value" :label="item.title" :value="item.title"></el-option>
                        </el-select>
                    </div>
                    <div class="ml-28">
                        <el-select no-match-text="暂无数据"  no-data-text="暂无数据" v-model="pageParams.employeeNumber" placeholder="请选择规模" clearable>
                            <el-option v-for="item in scaleSelection" :key="item.id" :label="item.title" :value="item.title"></el-option>
                        </el-select>
                    </div>
                    <div class="w-40 ml-28 d-flex">
                        <el-input class="w-70" placeholder="用人单位名称/社会信用代码" v-model="pageParams.search"></el-input>
                        <el-button style="background-color: #1890ff; color: white" @click="toSearch">搜索</el-button>
                    </div>
                </div>
            </div>
            <div class="h-90">
                <el-table
                    class="el-overflow-auto-hidden"
                    height="100%"
                    width="100%"
                    :header-cell-style="{ background: '#d4e5ff' }"
                    empty-text="暂无数据"
                    :data="tableData"
                    v-loading="loading"
                    style="width: 100%"
                >
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column prop="enterpriseName" label="单位名称" align="center"></el-table-column>
                    <el-table-column prop="unitIndustry" label="所属行业" align="center"></el-table-column>
                    <el-table-column prop="unitQuality" label="单位性质" align="center"></el-table-column>
                    <el-table-column prop="employeeNumber" label="规模" align="center"></el-table-column>
                    <el-table-column prop="location" label="地区" align="center"></el-table-column>
                    <el-table-column prop="attnName" label="经办人" align="center"></el-table-column>
                    <el-table-column prop="documents" label="单位证件" align="center">
                        <template #default="scope">
                            <div class="d-flex">
                                <el-image :src="scope.row.documents" fit="cover" :preview-src-list="[scope.row.documents, scope.row.supportingMaterial]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                                <el-image :src="scope.row.supportingMaterial" fit="cover" :preview-src-list="[scope.row.supportingMaterial, scope.row.documents]">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="positionNumber" label="职位数" align="center"></el-table-column>
                    <el-table-column prop="createTime" label="申请时间" align="center"></el-table-column>
                    <el-table-column prop="status" label="状态" fixed="right" align="center">
                        <template #default="scope">
                            <el-link v-if="scope.row.status === 0" :underline="false">未提交审核</el-link>
                            <el-link v-if="scope.row.status === 1" type="primary" :underline="false">待审核</el-link>
                            <el-link v-if="scope.row.status === 2" type="success" :underline="false">审核通过</el-link>
                            <el-link v-if="scope.row.status === 3" type="danger" :underline="false">审核未通过</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="操作" fixed="right" align="center">
                        <template #default="scope">
                            <el-button type="text" size="small" @click="viewDetails(scope.row.enterpriseId)">查看</el-button>
                            <el-button type="text" size="small" @click="audit(scope.row.enterpriseId)">审核</el-button>
                            <!--              <el-button-->
                            <!--                  type="text"-->
                            <!--                  size="small"-->
                            <!--                  @click="approvedMemo(scope.row.enterpriseId)">-->
                            <!--                审核记录-->
                            <!--              </el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <!--分页-->
        <div class="h-10 d-flex-center fs-16">
            <Page show-sizer :total="pageTotal" :current="pageParams.pageNumber" :page-size="pageParams.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" show-elevator />
        </div>
        <el-dialog title="企业参与的申请记录(暂未开发)" :visible.sync="dialogTableVisible">
            <el-table class="el-overflow-auto-hidden" :data="recordList" :header-cell-style="{ background: '#f0f0f0', color: '#606266' }" empty-text="暂无数据">
                <el-table-column property="name" label="学校名称" width="150"></el-table-column>
                <el-table-column property="activityType" label="活动类型" width="200"></el-table-column>
                <el-table-column property="reviewStatus" label="审核状态"></el-table-column>
                <el-table-column property="auditFail" label="审核原因" align="center">
                    <template slot-scope="scope">{{ scope.row.auditFail ? scope.row.auditFail : '--' }}</template>
                </el-table-column>
                <el-table-column property="auditTime" label="审核时间"></el-table-column>
            </el-table>
        </el-dialog>
        <!-- 导出全部数据弹窗 -->
        <el-dialog title="导出数据" :visible.sync="downloadVisible" class="">
            <div class="px-24 fs-14">
                <div class="bor-base-b bor-base-t mt-12" style="display: flex;justify-content: space-between;padding: 20px 0;box-sizing: border-box;">
                    <div style="width: 10%;">导出的字段</div>
                    <div style="width: 90%;">
                        <ul style="display: flex;flex-wrap: wrap;justify-content: left;width: 100%;box-sizing: border-box;padding-left: 30px;">
                            <li style="width: 150px;margin-bottom: 20px;" v-for="it in checkDownloadList" :key="it.value">
                                <el-checkbox v-model="it.check">{{ it['key'] }}</el-checkbox>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="py-12" style="height: 30px;display: flex;justify-content: right;align-items: center;margin-top: 30px;">
                    <el-button @click="downloadVisible = false">取消</el-button>
                    <el-button type="primary" @click="downloadSubmit">确定导出</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {getIndustryAPI, getNatureAPI, getPositionAPI, unitSizeAPI} from '../../../api/bys/index';
import {
    employerAPI,
    getShowAPI,
    getRequestRecordAPI,
    doubleElectionAuditEnterpriseAPI,
    exportAuditEntData,
    exportAuditEntDataNew,
    classParamListNewList
} from '../../../api/bys/recruitmentManagement/index';
export default {
    data() {
        return {
            downloadVisible: false,// 导出弹窗
            checkDownloadList: [],// 导出勾选list
            dialogTableVisible: false,
            loading: false,
            industrySelect: '',
            industrySelection: [], //行业
            natureSelect: '',
            natureSelection: [], //性质
            scaleSelect: '',
            recordList: [
                {
                    schoolName: '-',
                    activityType: '-',
                    auditStatus: '-',
                    auditReason: '-',
                    auditTime: '-'
                }
            ],
            scaleSelection: [
                {
                    label: '少于50人',
                    value: '少于50人'
                },
                {
                    label: '50-100人',
                    value: '50-100人'
                },
                {
                    label: '150-500人',
                    value: '150-500人'
                },
                {
                    label: '500-1000人',
                    value: '500-1000人'
                },
                {
                    label: '1000-5000人',
                    value: '1000-5000人'
                }
            ],
            jobCategorySelect: '',
            jobCategorySelection: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '职位类别',
                    value: '职位类别'
                }
            ],
            modelState: 'all',
            pageTotal: 0,
            pageParams: {
                pageNumber: 1,
                pageSize: 10,
                enterpriseName: '', //企业名称
                unitIndustry: '', //所属行业
                unitQuality: '', //企业性质
                employeeNumber: '', //员工数量
                status: '',
                shDoubleElectionId: '', //双选会id
                sort: '', //排序字段
                order: '' //排序方式 asc/desc
            },
            stateSelection: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '待审核',
                    value: '待审核'
                },
                {
                    label: '已通过',
                    value: '已通过'
                },
                {
                    label: '已拒绝',
                    value: '已拒绝'
                }
            ],
            modelPosition: '',
            positionSelection: [],
            tableData: []
        };
    },
    mounted() {
        this.pageParams.shDoubleElectionId = this.$route.query.id;
        console.log(this.pageParams.shDoubleElectionId, '双选会id');
        this.getList();
        this.getIndustry();
        this.getNature();
        this.getPosition();
        this.getScale()
    },
    methods: {
        // TODO 确认导出
        downloadSubmit(){
            const _this = this;
            const needExportParams = _this.checkDownloadList.filter(item => item.check).map(item => item.value);
            if(!needExportParams.length){
                _this.$message({
                    message: '请选择导出数据',
                    type: 'warning'
                });
                return;
            };
            exportAuditEntDataNew({doubleElectionId: _this.pageParams.shDoubleElectionId , needExportParams}).then(res => {
                // type的格式可以可以设置，可以把appcation/json设置进去，然后设置导出的类型
                const blob = new Blob([res], { type: 'charset=utf-8' });
                let url = window.URL.createObjectURL(blob);
                const link = document.createElement('a');
                link.style.display = 'none';
                link.href = url;
                link.setAttribute('download', '参会企业.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link); // 删除节点
                window.URL.revokeObjectURL(url); //释放该 url
                _this.downloadVisible = false;
            });
        },
        exportData(){
            const _this = this;
            classParamListNewList().then(req => {
                _this.downloadVisible = true;
                _this.checkDownloadList = req.map(item => {
                    item.check = true;
                    return item;
                });
            });
        },
        toSearch() {
            this.getList();
        },
        getList() {
            this.loading = true;
            doubleElectionAuditEnterpriseAPI(this.pageParams)
                .then(res => {
                    if (res.success) {
                        console.log(res.result, 'a a a ');
                        this.loading = false;
                        this.tableData = res?.result?.records || [];
                        this.pageTotal = res?.result?.total || 0;
                        console.log(this.tableData);
                    } else {
                        this.loading = false;
                    }
                })
                .catch(err => {
                    console.log(err);
                    this.loading = false;
                });
        },

        // region TODO 职位类别
        getPosition() {
            getPositionAPI().then(res => {
                console.log(res, '职位类别');
                this.jobCategorySelection = res.result;
            });
        },
        // endregion
        //企业规模
      getScale() {
        unitSizeAPI().then(res => {
          console.log(res.result,'企业规模')
            this.scaleSelection = res?.result || [];
          });
      },
        // region TODO 单位性质
        getNature() {
            getNatureAPI().then(res => {
                console.log(res, '单位性质');
                this.natureSelection = res.result;
            });
        },
        // endregion
        // region TODO 获取行业类别
        getIndustry() {
            getIndustryAPI().then(res => {
                console.log(res, '行业类别');
                this.industrySelection = res.result;
            });
        },
        // endregion
        // region TODO 查看
        viewDetails(id) {
            console.log(id, '查看');
            console.log(this.pageParams.shDoubleElectionId, '双选会id');
            this.$router.push({ name: 'UnitDetails', query: { id: id, shDoubleElectionId: this.pageParams.shDoubleElectionId,optionType:"参会用人单位and查看" } });
        },
        // endregion
        // region TODO 审核
        audit(id) {
            console.log(id, '审核');
            console.log(this.pageParams.shDoubleElectionId, '双选会id');
            this.$router.push({ name: 'UnitDetails', query: { id: id, shDoubleElectionId: this.pageParams.shDoubleElectionId,optionType:"参会用人单位and审核" } });
        },
        // endregion
        // region TODO 审核记录
        approvedMemo(id) {
            console.log('审核记录');
            getRequestRecordAPI({
                enterpriseId: id
            }).then(res => {
                if (res.success) {
                    console.log(res, '审核记录');
                    this.recordList = res?.result || [];
                    this.dialogTableVisible = true;
                } else {
                    this.recordList = [];
                    this.dialogTableVisible = true;
                }
            });
        },
        // endregion
        // region TODO 分页
        changePage(val) {
            this.pageParams.pageNumber = val;
            //调接口
            this.getList();
        },
        changePageSize(val) {
            this.pageParams.pageSize = val;
            //调接口
            this.getList();
        }
        // endregion
    }
};
</script>
